<!DOCTYPE HTML>
<html>

<head>
   <title>帖子评论</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/my-style.css" rel="stylesheet" type="text/css" />
</head>

<body class="dark-theme">
   <div class="container">
      <div class="detail-page">
         <div class="detail-page-title">
            <h4>帖子评论</h4>
         </div>
         <div class="jx-search-container">
            <form id="J_Form" class="jx-form form-horizontal jx-form-thin" method="post">
               <div class="row">
                  <div class="control-group span7">
                     <label class="control-label">帖子编号：</label>
                     <div class="controls">
                        <input type="text" class=" control-text" id="orderName">
                     </div>
                  </div>
                  <div class="control-group span11">
                     <label class="control-label">评论时间：</label>
                     <div class="controls">
                        <input class="calendar calendar-time" type="text" name="startTime" id="startTime"><span> &nbsp;-&nbsp; </span>
                        <input class="calendar calendar-time" type="text" name="endTime" id="endTime">
                     </div>
                  </div>
               </div>
               <div class="row ">
                  <div class="control-group span7">
                     <label class="control-label">用户账号：</label>
                     <div class="controls">
                        <input type="text" class=" control-text" id="receiverPhone">
                     </div>
                  </div>
                  <div class="control-group span7">
                     <label class="control-label">商户：</label>
                     <div class="controls">
                        <input type="text" class=" control-text" id="receiverPhone">
                     </div>
                  </div>
                  <div class="control-group span2 pull-right">
                     <button type="submit" class="jx-btn btn-default">搜索</button>
                  </div>
               </div>

            </form>
         </div>

         <div>
            <div id="grid"></div>
         </div>
      </div>
   </div>
   </div>
   <!-- 初始隐藏 remakesDialog内容 -->
   <div id="remarks" class="hide">
      <form class="form-horizontal">
         <div id="" class="row">
            <div class="control-group span12">
               <div class="control-row4 ">
                  <textarea class="input-large" type="text"></textarea>
               </div>
            </div>

         </div>
      </form>
   </div>

   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/admin.js"></script>

   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script>
      BUI.use(['bui/grid', 'bui/data', 'bui/calendar', 'bui/tab', 'bui/overlay', 'common/search'], function (Grid, Data,
         Calendar,
         Tab, Overlay, Search) {
         var Grid = Grid,
            Store = Data.Store,
            columns = [{
                  title: '帖子编号',
                  elCls: 'center',
                  dataIndex: 'a',
                  width: 150,
               },
               {
                  title: '评论',
                  dataIndex: 'b',
                  elCls: 'center', //居中
                  width: 300,
               },

               {
                  title: '回复数',
                  elCls: 'center',
                  dataIndex: 'c',
                  width: 150
               }, {
                  title: '评论点赞数',
                  elCls: 'center',
                  dataIndex: 'd',
                  width: 150,
               }, {
                  title: '用户账号',
                  elCls: 'center',
                  dataIndex: 'e',
                  width: 150
               }, {
                  title: '商户',
                  elCls: 'center',
                  dataIndex: 'f',
                  width: 150
               }, {
                  title: '评论时间',
                  elCls: 'center',
                  dataIndex: 'g',
                  width: 150
               }, {
                  title: '操作',
                  dataIndex: 'i',
                  elCls: 'center',
                  width: 200,
                  renderer: function (value, obj) {
                     var frozenStr = '<span class="grid-command frozen-btn">[屏蔽]</span>';
                     return frozenStr;
                  }
               }
            ],
            data = [{
               a: 'A8540960',
               b: '东西实在是太好用了，值得推荐！',
               c: '10',
               d: '782',
               e: 'Aillian_wang',
               f: '激想体育特卖号',
               g: '2018-04-21 15:30:28'
            }];
         var datepicker = new Calendar.DatePicker({
            trigger: '.calendar',
            autoRender: true
         });
         var store = new Store({ //初始化数据
               data: data,
               pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'small-bui-grid-table',
               columns: columns,
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               store: store
            });


         grid.render();
         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;
            if (sender.hasClass('reply-btn')) { //点击回复
               remarksDialog.show();
            } else if (sender.hasClass('frozen-btn')) {
               frozenFunction(item, itemEl)
            }
         });

         //屏蔽评论
         function frozenFunction(item, itemEl) {
            BUI.Message.Confirm('确认屏蔽该评论吗？', function () {

            }, 'question');
         }
         //回复
         var remarksDialog = new Overlay.Dialog({
            title: '评论回复',
            width: 380,
            //配置DOM容器的编号
            contentId: 'remarks',
            success: function () {
               //点击成功时候操作
               BUI.Message.Alert('回复成功');
               this.close();
            }
         });
      });
   </script>
   <!-- script end -->

</body>

</html>